<template>
  <div class="app-container">

    <el-row :gutter="20" style="background-color: #2c2b31;height: 120px; margin-bottom: 10px" type="flex"
            justify="space-around"
            class="row-bg"
    >
      <el-col :span="4" class="statmy">
        <img :src=zongshu />
        <span style="padding: 0.5rem !important;font-size: 25px;color: #D3DCE6">20000<br/><span style="font-size: 18px">总数</span></span>
      </el-col>
      <el-col :span=" 4" class="statmy">
        <img :src="muniu"/>
        <span style="padding: 0.5rem !important;font-size: 25px;color: #D3DCE6">20000<br/><span style="font-size: 18px">母牛</span></span>
      </el-col>
      <el-col :span="4" class="statmy">
        <img :src="yufeiniu"/>
        <span style="padding: 0.5rem !important;font-size: 25px;color: #D3DCE6">20000<br/><span style="font-size: 18px">育肥牛</span></span>
      </el-col>
      <el-col :span="4" class="statmy">
        <img :src="xiaoniu"/>
        <span style="padding: 0.5rem !important;font-size: 25px;color: #D3DCE6">20000<br/><span style="font-size: 18px">牛犊</span></span>
      </el-col>
      <el-col :span="4" class="statmy">
        <img :src="siliao"/>
        <span style="padding: 0.5rem !important;font-size: 25px;color: #D3DCE6">20000<br/><span style="font-size: 18px">饲料</span></span>
      </el-col>
    </el-row>


    <el-row :gutter="20" style="background-color: #2c2b31;height: 120px; margin-bottom: 10px" type="flex"
            justify="space-around"
            class="row-bg"
    >
      <el-col :span="4" class="statmy">
        <img :src="shouyao"/>
        <span style="padding: 0.5rem !important;font-size: 25px;color: #D3DCE6">20000<br/><span style="font-size: 18px">兽药</span></span>
      </el-col>
      <el-col :span=" 4" class="statmy">
        <img :src="gongju"/>
        <span style="padding: 0.5rem !important;font-size: 25px;color: #D3DCE6">20000<br/><span style="font-size: 18px">工具</span></span>
      </el-col>
      <el-col :span="4" class="statmy">
        <img :src="niufen"/>
        <span style="padding: 0.5rem !important;font-size: 25px;color: #D3DCE6">20000<br/><span style="font-size: 18px">牛粪</span></span>
      </el-col>
      <el-col :span="4" class="statmy">
        <img :src="qita"/>
        <span style="padding: 0.5rem !important;font-size: 25px;color: #D3DCE6">20000<br/><span style="font-size: 18px">其他</span></span>
      </el-col>
      <el-col :span="4" style="background-color: #55a532">

        <span
          style="padding: 0.5rem !important;text-align: center;display:block;margin-top: 10px;font-size: 45px;color: #D3DCE6"
        >￥{{
            randomArr[randomArr.length - 1]
          }}</span>

      </el-col>
    </el-row>

    <div>
      <el-row :gutter="20" style="background-color: #2c2b31;" type="flex" justify="space-around">
        <el-col :span="13">
          <div ref="line" style="width: 100%;height: 500px;">
          </div>
        </el-col>
        <el-col :span="10" :offset="2">
          <div ref="pie" style="width: 100%;height: 500px;">
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import zongshu from '@/assets/img/zongshu.png'
import muniu from '@/assets/img/muniu.png'
import yufeiniu from '@/assets/img/yufeiniu.png'
import xiaoniu from '@/assets/img/xiaoniu.png'
import siliao from '@/assets/img/siliao.png'
import shouyao from '@/assets/img/shouyao.png'
import gongju from '@/assets/img/gongju.png'
import niufen from '@/assets/img/niufen.png'
import qita from '@/assets/img/qita.png'

export default {
  name: 'stat',
  data() {
    return {
      zongshu,
      muniu,
      yufeiniu,
      xiaoniu,
      siliao,
      shouyao,
      gongju,
      niufen,
      qita,
      line: null,
      randomArr: [],
      randomDate: [],
      result: []
    }

  },
  methods: {
    /* drawLine(){
       this.temp=echarts.init(document.getElementById('lineMain'));
       let option = {
         color: ['#ffffff'],
         xAxis: {
           type: 'category',
           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
           nameTextStyle: {        //坐标轴名称的文字样式
             color: '#ffffff',
             fontSize: 16,
             padding: [0, 0, 0, 20]
           },
           axisLine: {             //坐标轴轴线相关设置。
             lineStyle: {
               color: '#ffffff',
             }
           },
         },
         yAxis: {
           nameTextStyle: {
             color: '#ffffff',
             fontSize: 16,
             padding: [0, 0, 10, 0]
           },
           axisLine: {
             lineStyle: {
               color: '#ffffff',
             }
           },
           type: 'value'
         },
         series: [
           {
             data: [820, 932, 901, 934, 1290, 1330, 1320],
             type: 'line',
             label: {
               show: true,
               position: 'top'
             },
             smooth: true
           }
         ]
       };
       this.temp.setOption(option);
     },
     getLastDay(){
       var aDate = new Date();
       var aYear = aDate.getFullYear();
       var aMonth = aDate.getMonth()+1;
       var new_date = new Date(aYear,aMonth,0);
       return new_date
     }*/
    zhengHe() {
      this.result = this.randomArr.map((item, i) => ({
        value: item,
        name: this.randomDate[i]
      }))
    },
    randomData() {
      // setTimeout(function (){
      let temp = 0
      temp = Math.floor(Math.random() * 8000)
      for (let i = 1; i <= 10; i++) {
        temp +=Math.floor(Math.random() * 4000);
        this.randomArr.push(temp)
      }
      //  }, 3000);
    },
    randomDay() {
      let lastMonth = []
      for (let i = 0; i < 10; i++) {
        lastMonth.unshift(new Date(new Date()
          .setDate(new Date().getDate() - i))
          .toLocaleDateString())
      }

      this.randomDate = lastMonth
    },
    drawLine() {
      let temp = this.$echarts.init(this.$refs.line,)
      let option = {
        color: '#ffffff',
        backgroundColor: '#2c2b31',
        xAxis: {
          type: 'category',
          data: this.randomDate,
          nameTextStyle: {        //坐标轴名称的文字样式
            color: '#ffffff',
            fontSize: 16,
            padding: [0, 0, 0, 20]
          },
          axisLine: {             //坐标轴轴线相关设置。
            lineStyle: {
              color: '#ffffff'
            }
          }
        },
        yAxis: {
          nameTextStyle: {
            color: '#ffffff',
            fontSize: 16,
            padding: [0, 0, 10, 0]
          },
          axisLine: {
            lineStyle: {
              color: '#ffffff'
            }
          },
          type: 'value'
        },
        series: [
          {
            label: {
              show: true,
              position: 'top'
            },
            data: this.randomArr,
            type: 'line',
            smooth: true
          }
        ]
      }
      temp.setOption(option)
    },
    drawPie() {
      let pie = this.$echarts.init(this.$refs.pie,)
      let option = {
        legend: {
          top: 'top',
          textStyle: { //图例文字的样式
            color: '#fff'
          }
        },
        backgroundColor: '#2c2b31',
        series: [
          {
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            name: '统计图--饼图',
            type: 'pie',
            radius: [50, 150],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: this.result
          }
        ]
      }
      pie.setOption(option)
    }

  },
  mounted() {
    // this.drawLine();
    this.randomData()
    this.randomDay()
    this.zhengHe()
    this.drawLine()
    this.drawPie()
  }
}
</script>
<style>
.statmy {
  display: flex;
  align-items: center;
  /*
  justify-content: space-between;
*/
}

</style>

<style lang="less" scoped>
</style>
